import {TopBarInfo, TopBarInterface} from "../../interface/GuiInterface";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {ColorStr} from "../../../script/type/Type";

export interface IProp {
    getTopInfo: (player: PlayerModel) => TopBarInfo;
}
export interface IState {
    coin: number,
    wood: number,
    killNum: number,
    monsterNum: number,
    maxMonsterNum: number,
    wave: number,
    waveTime: number,
    diffNum: number,

    title: string;
    subTitle: string;
    cr: number;
    des: string
    infoVisible: boolean;
    x: number;
    y: number;
}

export default class TopBar extends TopBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: true,
            coin: 0,
            wood: 0,
            killNum: 0,
            monsterNum: 0,
            maxMonsterNum: 0,
            wave: 0,
            waveTime: 0,
            diffNum: 0,

            infoVisible: false,
            title: "",
            subTitle: '',
            cr: 0,
            des: '',
            x: 0,
            y: 0,
        }
    }

    render = () => {
        const topBarBoard = Configer.getResource(ResourceKey.topBarBoard)
        const disableBlp = Configer.getResource(ResourceKey.disableBlp)

        const coinNumIcon = Configer.getResource(ResourceKey.coinNumIcon)
        const woodNumIcon = Configer.getResource(ResourceKey.woodNumIcon)
        const killNumIcon = Configer.getResource(ResourceKey.killNumIcon)
        // const topBarBoard = Configer.getResource(ResourceKey.topBarBoard)
        // const topBarBoard = Configer.getResource(ResourceKey.topBarBoard)

        const iconMargin = { l: 0.1, t: 0.001 };
        const iconSize = { h: 0.032, w: 0.018 }


        const textMargin = { l: 0.005, t: 0.01 };
        const textSize = { h: 0.032, w: 0.0715 }

        const topTextMargin = { l: 0.4, t: 0.005 };
        const topTextPadding = { l: 0, t: 0 };
        const topTextSize = { h: 0.045, w: 0.2 }

        const str1 = `(难度${this.state.diffNum})波数${this.state.wave} - ${this.state.waveTime}`;

        const str2 = `怪物数: ${this.state.monsterNum}/${this.state.maxMonsterNum}`


        return <View key={GuiKeys.topBar} style={{ backgroundImage: topBarBoard, width: 1, height: 0.092, left: 0, top: 0 }}>
            <View key={GuiKeys.topBarText} style={{ width: topTextSize.w, height: topTextSize.h, marginL: topTextMargin.l, marginT: topTextMargin.t }}>
                <View key={GuiKeys.topBarText1} style={{ width: topTextSize.w, height: topTextSize.h / 2, fontAlign: TextAlign.center, paddingT: topTextPadding.t, color: ColorStr.black }}>{str1}</View>
                <View key={GuiKeys.topBarText2} style={{ width: topTextSize.w, height: topTextSize.h / 2, fontAlign: TextAlign.center, paddingT: topTextPadding.t, color: ColorStr.black }}>{str2}</View>
            </View>
            <View   key={GuiKeys.topBarCoinIcon} style={{ backgroundImage: coinNumIcon, height: iconSize.h, width: iconSize.w, marginT: iconMargin.t, marginL: iconMargin.l }}></View>
            <View   key={GuiKeys.topBarCoinText} style={{ width: textSize.w, height: textSize.h, marginL: textMargin.l, marginT: textMargin.t }}>{this.state.coin}</View>
            <View   key={GuiKeys.topBarWoodIcon} style={{ backgroundImage: woodNumIcon, height: iconSize.h, width: iconSize.w, marginT: iconMargin.t}}></View>
            <View   key={GuiKeys.topBarWoodText} style={{ width: textSize.w, height: textSize.h, marginL: textMargin.l, marginT: textMargin.t }}>{this.state.wood}</View>
            <View   key={GuiKeys.topBarKillIcon} style={{ backgroundImage: killNumIcon, height: iconSize.h, width: iconSize.w, marginT: iconMargin.t}}></View>
            <View   key={GuiKeys.topBarKillText} style={{ width: textSize.w, height: textSize.h, marginL: textMargin.l, marginT: textMargin.t }}>{this.state.killNum}</View>
        </View>
    }

    openBar = () => {
        const topInfo = this.props.getTopInfo(PlayerFactory.getInstance().getLocalPlayer());
        // Logger.toastError(JSON.stringify(topInfo))
        this.setState({
            ...this.state,
            coin: topInfo.coin,
            wood: topInfo.wood,
            killNum: topInfo.killNum,
            wave: topInfo.wave,
            waveTime: topInfo.waveTime,
            monsterNum: topInfo.monsterNum,
            maxMonsterNum: topInfo.maxMonsterNum,
            diffNum: topInfo.diffNum,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}